<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<script type="text/javascript">
$(function () {	
    $('#simpleTree1').BootstrapTree({
    	expand: false,
		data: treeData
	});

    $('#simpleTree2').BootstrapTree({
    	expand: false,
		data: treeData1.toTree('id','pid'),
		onLeafClick: function(data,node){
			alert(JSON.stringify(data));
		},
	});
    
    $('#customIconTree').BootstrapTree({
    	expand: true,
    	icon: basePath+'/static/js/lib/bootstrap/img/save.gif',
		data: treeData2.toTree('id','pid'),
	});    

    $('#checkboxTree').BootstrapTree({
    	expand: true,
    	checkbox: true,
		data: treeData,
		onCheckClick: function(data,node){
			alert(JSON.stringify(data));
		}
	});    
    
});

</script>
</head>

<body>
<div class="container">
	<nav id="menu"></nav>
	<div class="panel panel-default">
        <div class="panel-heading">简单树(传统数据格式)</div>
        <div class="panel-body"> 
            <div id="simpleTree1"></div>
        </div>
        <div class="panel-footer">
                             简单树简略使用说明：                                                                                                                                          </br>
	    $('#simpleTree1').BootstrapTree({               </br>
	    	expand: false,                              </br>
			data: treeData                              </br>
		});                                             </br>
		其中expand参数为初始化树时是否展开，默认为true               </br>
		data参数为载入树的数组数据                                                                                                                  </br>
		本例为传统数据格式，其格式如下：                                                                                                </br>
		[                                               </br>
		 { "text": "长安汽车", "data":{"id":"10000","code":"CA"}, "children": [       </br>
		     &nbsp;&nbsp;{ "text": "华北大区", "data":{"id":"11000","code":"N"} },                </br>
		     &nbsp;&nbsp;{ "text": "华南大区", "data":{"id":"12000","code":"S"},"children": [     </br>
		         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "text": "广东", "data":{"id":"12100","code":"GD"} },              </br>
		         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "text": "广西", "data":{"id":"12200","code":"GX"} },              </br>
		       &nbsp;&nbsp;&nbsp;&nbsp;]                                                                    </br>
		     &nbsp;&nbsp;},                                                                     </br>
		 { "text": "福田汽车", "data":{"id":"20000","code":"FT"} },                    </br>
		 { "text": "上海大众", "data":{"id":"30000","code":"DZ"} },                    </br>
		 { "text": "广汽本田", "data":{"id":"40000","code":"BT"} }                     </br>
		];                                                                          </br>
		];                                                                          </br>					            
        </div>
    </div>
	<div class="panel panel-default">
        <div class="panel-heading">简单树(关系数据格式)</div>
        <div class="panel-body"> 
            <div id="simpleTree2"></div>
        </div>
        <div class="panel-footer">
                             关系数据格式简略使用说明：                                      </br>
                             本例载入数据为关系数据格式，其数据格式如下：                          </br>
		[                                                      </br>
		    {"id":"10000","pid":null,"text":"长安汽车"},          </br>
		    {"id":"20000","pid":null,"text":"福田汽车"},          </br>
		    {"id":"30000","pid":null,"text":"上海大众"},           </br>
		    {"id":"11000","pid":"10000","text":"华北大区"},        </br>
		    {"id":"12000","pid":"10000","text":"华南大区"},         </br>
		    {"id":"13000","pid":"10000","text":"西南大区"},         </br>
		    {"id":"14000","pid":"10000","text":"西北大区"},         </br>
		    {"id":"13100","pid":"13000","text":"重庆"},            </br>
		    {"id":"13200","pid":"13000","text":"四川"},             </br>
		    {"id":"40000","pid":null,"text":"广汽本田"},             </br>   
              ],                                                         </br>
                                                      通过Array的扩展函数toTree(在bootstrap-base.js中定义)将关系型数据转化为传统数据再载入树中   </br>
	              使用方法如下：                                                                                                                                                                                   </br>
	    $('#simpleTree2').BootstrapTree({                           </br>
	    	expand: false,                                         </br>
			data: treeData1.toTree('id','pid')                      </br>
		});                                                         </br>          	            
        </div>
    </div>


	<div class="panel panel-default">
        <div class="panel-heading">自定义图标</div>
        <div class="panel-body"> 
            <div id="customIconTree"></div>
        </div>
        <div class="panel-footer">
                            自定义图标简略使用说明：                                                     </br>
	    $('#customIconTree').BootstrapTree({                           </br>
	    	expand: true,                                              </br>
	    	icon: basePath+'/static/js/lib/bootstrap/img/save.gif',    </br>
			data: treeData2.toTree('id','pid'),                        </br>
		});                                                             </br>
		可以通过定义icon属性指向一个图片路径来自定义树节点的图标                                                                                            </br>
		如需要对某个特定节点自定义图标，可以通过对data数据指定icon属性来实现：                                                            </br>
		{"id":"30000","pid":null,"text":"上海大众","icon":basePath+"/static/js/lib/bootstrap/img/add.gif"},     </br>          
        </div>
    </div>

	<div class="panel panel-default">
        <div class="panel-heading">带checkbox的树</div>
        <div class="panel-body"> 
            <div id="checkboxTree"></div>
        </div>
        <div class="panel-footer">
	              带checkbox的树简略使用说明：                                         </br>
	    $('#checkboxTree').BootstrapTree({               </br>
	    	expand: true,                                </br>
	    	checkbox: true,                              </br>
			data: treeData,                              </br>
			onCheckClick: function(data,node){           </br>
				alert(JSON.stringify(data));             </br>
			}                                            </br>
		});                                              </br>
		通过定义checkbox属性为true来实现带checkbox的树，默认为false  </br>        
        </div>
    </div>        

               
</div> 
</body>

</html>